<template>
    <div>
        <!-- <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item><el-input v-model="form.mode" style="width: 300px" placeholder="动员方式"></el-input></el-form-item>
            <el-form-item><el-button type="primary" @click="query">搜索</el-button></el-form-item>
        </el-form> -->
        <el-table  :data="tableData" border>
            <el-table-column prop="objective" align="center" label="实际目的"></el-table-column>
            <el-table-column prop="mode" align="center" label="动员方式"></el-table-column>
            <el-table-column prop="demand" align="center" label="社区需求"></el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button type="success" size="mini" @click="details(scope.row)">详情</el-button>
                    <el-button
                            v-if="scope.row.level=== undefined"
                            type="danger"
                            size="mini"
                            @click="respond(scope.row)">
                        评价
                    </el-button>
                    <el-button
                            v-show="scope.row.level==='1'"
                            type="info"
                            size="mini"
                            @click="responded(scope.row)">
                        已评价
                    </el-button>
                    <el-button
                            v-show="scope.row.level==='2'"
                            type="info"
                            size="mini"
                            @click="responded(scope.row)">
                        已评价
                    </el-button>
                    <el-button
                            v-show="scope.row.level==='3'"
                            type="info"
                            size="mini"
                            @click="responded(scope.row)">
                        已评价
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNo"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="totalRecord" class="text-center mt10">
        </el-pagination>
        <!-- 评价弹出框 -->
        <el-dialog title="评价" :visible.sync="dialogFormVisible" @close='closeDialog' width="650px">
            <el-radio-group v-model="radio" style="margin-left: 60px;margin-bottom: 40px">
                <el-radio style="margin-left: 60px" :label="1">满意</el-radio>
                <el-radio style="margin-left: 60px" :label="2">一般</el-radio>
                <el-radio style="margin-left: 60px" :label="3">不满意</el-radio>
            </el-radio-group>
            <div style="width: 160px; margin-left: 445px">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 已评价弹出框 -->
        <el-dialog title="评价" :visible.sync="dialogRespondVisible" @close='closeDialog' width="650px">
            <el-radio-group v-model="radio" style="margin-left: 60px;margin-bottom: 40px" readonly>
                <el-radio readonly  style="margin-left: 60px" :label="1">满意</el-radio>
                <el-radio readonly  style="margin-left: 60px" :label="2">一般</el-radio>
                <el-radio readonly  style="margin-left: 60px" :label="3">不满意</el-radio>
            </el-radio-group>

        </el-dialog>
        <!-- 详情弹出框 -->
        <el-dialog title="详情" :visible.sync="dialogFormVisibleDetails" width="650px">

            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="动员详情" name="first">
                    <el-form :model="detailsform" class="ml100">
                        <el-form-item label="实际目的" >
                            <el-input v-model="detailsform.objective" class="w400" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="动员方式" >
                            <el-input v-model="detailsform.mode" class="w400" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="社区需求">
                            <el-input v-model="detailsform.demand" type="textarea" :rows="5" style='width:330px;' readonly></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="回应详情" name="second">
                    <el-table  :data="hyTableDate" border>
                        <el-table-column prop="strategy" align="center" label="回应策略"></el-table-column>
                        <el-table-column prop="practice" align="center" label="回应做法"></el-table-column>
                        <el-table-column prop="department" align="center" label="对接部门"></el-table-column>
                        <el-table-column prop="resources" align="center" label="使用资源"></el-table-column>
                        <el-table-column align="center" label="操作">
                            <template slot-scope="scope">
                                <el-button type="success" size="mini" @click="hydetails(scope.row)">详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>

            </el-tabs>

            <div style="width: 160px; margin-left: 520px;margin-top: 10px">
                <el-button type="primary" @click="ok">关闭</el-button>
            </div>
        </el-dialog>

        <el-dialog title="评价" :visible.sync="RespondDetailVisible" @close='closeDialog' width="650px">
            <el-form :model="detailsform" class="ml100">
                <el-form-item label="回应策略" >
                    <el-input v-model="detailsform.strategy" class="w400" readonly></el-input>
                </el-form-item>
                <el-form-item label="回应做法">
                    <el-input v-model="detailsform.practice" class="w400" readonly></el-input>
                </el-form-item>
                <el-form-item label="对接部门" >
                    <el-input v-model="detailsform.department" class="w400" readonly></el-input>
                </el-form-item>
                <el-form-item label="使用资源" >
                    <el-input v-model="detailsform.resources" class="w400" readonly></el-input>
                </el-form-item>
                <el-form-item label="投入费用">
                    <el-input v-model="detailsform.cost" class="w400" readonly></el-input>
                </el-form-item>
                <el-form-item label="所需时间" >
                    <el-input v-model="detailsform.time" class="w400" readonly></el-input>
                </el-form-item>
                <el-form-item label="集体步骤" >
                    <el-input v-model="detailsform.step" class="w400" readonly></el-input>
                </el-form-item>
            </el-form>
            <div style="width: 160px; margin-left: 520px">
                <el-button type="primary" @click="RespondDetailVisible = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
    export default {
        data () {
            return {
                activeName:'first',
                RespondDetailVisible:false,
                /*单选*/
                radio:0,
                //动员搜索
                form: {
                    mode: ''
                },
                cid:'',

                //详情
                detailsform: {
                    objective: '',
                    mode: '',
                    demand: ''
                },
                hyTableDate:[],
                tableData: [],
                pageNo: 1,
                pageSize: 10,
                totalRecord: 0,
                totalPage: 0,
                dialogFormVisible: false,
                dialogFormVisibleDetails: false,
                dialogRespondVisible:false,//已评价
                loading: false,
                typeList:[],

                hydetailsform: {
                    strategy :'',//策略
                    practice :'',//做法
                    department :'',//对接部门
                    resources :'',//使用资源
                    cost :'',//投入费用
                    time :'',//所花时间
                    step :''//具体步骤
                },
                form1:{},
            }
        },

        methods : {

            async hydetails(row){
                console.log(row)
                this.RespondDetailVisible = true
                this.detailsform = row
            },

            handleClick(tab, event) {
                console.log(tab, event);
            },
            //初始化
            async init () {
                const res = await this.$http('evaluatelist');
                console.log('待评价',res)
                this.tableData = res.results

                this.totalPage = res.totalPage;
                this.totalRecord = res.totalRecord;
            },
            //分页
            async handleSizeChange(val) {
                this.form.pageSize = val;
                this.init();
            },
            async handleCurrentChange(val) {
                this.form.pageNo = val;
                this.init();
            },
            //查询搜索
            /*async query() {
                const res = await this.$http('evaluatelist', {
                    mode: this.form.mode
                });
                this.tableData = res
                this.form.mode = ''
            },*/
            //详情
            async details(row){
                this.activeName = 'first'
                console.log('huiying',row)
                const res = await this.$http('respondList', {
                    mobilization_id: row.id
                });
                // this.hydetailsform = res.results
                this.hyTableDate = res.results
                this.dialogFormVisibleDetails = true;
                this.detailsform = row;

            },
            //关闭
            async ok(){
                this.dialogFormVisibleDetails = false
            },
            //评价功能
            respond(row){
                this.radio = 0
                console.log('this.radio',this.radio)
                this.dialogFormVisible = true
                this.cid= row.id
            },

            //已评价功能
            responded(row){
                console.log('点击已评价按钮',row)
                let num = parseInt(row.level)
                console.log('111111111111',num)
                this.radio = num
                console.log('this.radio',this.radio)
                this.dialogRespondVisible = true
                this.cid= row.id
            },
            //点击确定，评价
            async save(){
                const  res = await this.$http('createEvaluate',{
                    mobilization_id : this.cid,
                    level : this.radio,
                    err : res1 => {
                        console.log('2222',res1)
                        if (res1.errcode === 1234) {
                            this.$message({
                                message: '你已经评价过了',
                                type: 'success'
                            });
                            this.dialogFormVisible = false
                            this.init()
                        }else {
                            this.$message({
                                message: '评价失败',
                                type: 'error'
                            });
                            this.dialogFormVisible = false
                        }
                    }

                });
                console.log('rrreeesss',res)
                if (res === 'chenggong') {
                    this.$message({
                        message: '评价成功',
                        type: 'success'
                    });
                    this.init()
                    this.dialogFormVisible = false
                }

            },
            //请空数据
            async closeDialog(){
                this.respondform = {
                    strategy:'',
                    practice:'',
                };
            },
        },

        watch : {

        },

        mounted () {
            this.init();
        },

    }
</script>


<style scoped>
    .w400{
        width: 330px
    }
</style>
